<template>
  <van-form v-bind="formParams">
    <template v-for="item in options" :key="item.name">
      <component
        :is="formType[item.type]"
        v-model="formData[item.value || item.name]"
        :params="item"
        :form-params="formParams"
        @validate="validateEmit"
        @get-text="getText"
      />
    </template>
  </van-form>
  <slot :is-validate="isValidate" />
</template>

<script setup>
import { formType } from './enum'
import { computed, reactive } from 'vue'

const props = defineProps(['formOptions', 'formParams', 'modelValue'])
const options = computed(() => props.formOptions.filter(item => !item.hidden))
// 表单值
const formData = reactive(props.modelValue)
// 校验结果
const isValidate = reactive({})

const getText = value => {
  Object.assign(formData, value)
}

// 获取校验的结果存储在对象中 同一个表单项结果覆盖
const validateEmit = val => {
  isValidate[val.name] = val
}
</script>
